<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :model="form"

               ref="form">
        <el-form-item>
          <el-button type="success" icon="el-icon-refresh"
                     v-if="hasPermission('prem:list')"
                     @click="getList()">refresh
          </el-button>
          <el-button type="primary" icon="el-icon-plus"
                     v-if="hasPermission('prem:save')"
                     @click="showSaveDialog(-1)">add
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  <el-table :data="permList"
            v-loading.body="listLoading"
            element-loading-text="loading"
            border fit highlight-current-row>

    <el-table-column label="Username" align="center" prop="id"/>
    <el-table-column label="resource" align="center" prop="resource"/>
    <el-table-column label="code" align="center" prop="code"/>
    <el-table-column label="handle" align="center" prop="handle"/>
    <el-table-column label="Admin" align="center"
                     v-if="hasPermission('role:update') || hasPermission('role:delete')">
      <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit"
                   v-if="hasPermission('role:update') && scope.row.name !== 'ROLE_ADMIN'"
                   @click="showSaveDialog(scope.$index)">
        </el-button>

      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="listQuery.page"
    :page-size="listQuery.size"
    :total="total"
    :page-sizes="[5,10, 30, 50, 100]"
    layout="total, sizes, prev, pager, next, jumper">
  </el-pagination>
     <el-dialog :title="textMap[dialogStatus]"
               :visible.sync="dialogFormVisible">
       <!--:model="form :rules="createRules" 验证时需要，配合prop="resource " 使用-->
      <el-form :model="form"
               :rules="createRules"
               status-icon class="small-space" label-position="left" label-width="100px" style="width: 500px; margin-left:50px;">
        <el-form-item label="资源" prop="resource">
          <el-input type="text" v-model="form.resource"></el-input>
        </el-form-item>
        <el-form-item label="handle">
          <el-input v-model="form.handle"></el-input>
        </el-form-item>

         <el-form-item label="code">
            <el-input v-model="form.code"></el-input>
          </el-form-item>



        </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">cancel</el-button>
         <el-button type="danger"
                    >reset
         </el-button>
         <el-button type="primary"

                    @click="update">保存
         </el-button>
       </div>
    </el-dialog>
  </div>
</template>

<script>
  import { list,save } from '@/api/perm'
  import { isValidateEmail } from '@/utils/validate'
  import { unix2CurrentTime } from '@/utils'
  import { mapGetters } from 'vuex'
  export default {
    data(){
      const validateresource = (rule, value, callback) => {
        if (value.length < 3) {
          callback(new Error('username must be 3 or more characters'))
        } else {
          callback()
        }
      }
      return{
        listLoading: false,
        total:0,
        dialogStatus: 'add',
        textMap: {
          update: '更新权限',
          add: '添加权限'
        },
        dialogFormVisible: false,
        listQuery: {
          page: 1,
          size: 5
        },
        form:{}
        ,permList:[]
        ,createRules: {
          resource: [{  trigger: 'blur', validator:validateresource }]
        }
      }

    }
    ,created(){
      this.getList();
    }
    ,methods:{
      getList(){
        /*this.permList=[{id:1,name:"tom"},{id:2,name:"jo"}]*/
        this.listLoading = true
        list(this.listQuery).then(response => {
          this.permList = response.data.list
          this.total = response.data.total
          this.listLoading = false
        })
      }
      ,update(){
        this.$refs.form.validate(valid => {
          if (valid) {
           alert(8)
          }
        })
        /*save(this.form).then(response => {
         if(response.code==200){
           alert("保存成功")
           this.dialogFormVisible = false;
           this.getList()
         }else{
           alert(response.msg)
         }

        })*/
      }
      ,showSaveDialog(index) {
        if(index!=-1){
          this.dialogStatus = 'update'
          const p = this.permList[index]
          this.form=p;
        }else{
          this.form={};
        }
        this.dialogFormVisible = true

      }
      ,   /**
       * 改变每页数量
       * @param size 页大小
       */
      handleSizeChange(size) {
        this.listQuery.page = 1
        this.listQuery.size = size
        this.getList()
      },
      /**
       * 改变页码
       * @param page 页号
       */
      handleCurrentChange(page) {
        this.listQuery.page = page
        this.getList()
      },
      /**
       * 表格序号
       * @param index 数据下标
       * @returns 表格序号
       */
      getTableIndex(index) {
        return (this.listQuery.page - 1) * this.listQuery.size + index + 1
      },
    }
  }
</script>

<style scoped>

</style>
